<template>
  <div class="main">
    <!-- 首页标题 -->
    <div class="main-title">
      <div class="main-title__router" @click="onclickRouterUrl('soleMap')">
        位置
      </div>
      <i class="main-title__icon"></i>
      <div class="main-title__position">
        <span>南宁市</span>
        <span>2024年2月5日</span>
        <span>12:00</span>
        <div class="main-title__position__weather">
          <i class="main-title__position__weather__icon"></i>
          <span>11°C</span>
        </div>
      </div>
    </div>

    <div class="main-content">
      <div class="left-wrapper">
        <!-- <div class="left-wrapper__city"></div> -->
        <div class="left-wrapper__content">
          <ContentFrame
            :height="30"
            title="全省边坡信息"
            class="left-wrapper__module"
          >
            <ProvincialSlopeInformation />
          </ContentFrame>
          <ContentFrame
            :height="30"
            title="设备情况"
            class="left-wrapper__module"
          >
            <DeviceSituation />
          </ContentFrame>
          <ContentFrame
            :height="30"
            title="告警处理"
            class="left-wrapper__module"
          >
            <AlarHand />
          </ContentFrame>
        </div>
      </div>

      <div class="middle-wrapper"></div>

      <div class="right-wrapper">
        <ContentFrame
          :height="20"
          title="边坡风险评估数量统计"
          class="right-wrapper__module"
        >
          <RiskStatistics />
        </ContentFrame>

        <ContentFrame
          :height="40"
          title="风险边坡TOP5"
          class="right-wrapper__module"
        >
          <RiskTop10 />
        </ContentFrame>

        <ContentFrame
          :height="30"
          title="各区风险评估统计"
          class="right-wrapper__module"
        >
          <RiskAssessment />
        </ContentFrame>
      </div>
    </div>

    <div class="unityModel">
      <Map></Map>
      <div class="unityModel__shade"></div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import ContentFrame from "./components/contentFrame/contentFrame.vue";
import ProvincialSlopeInformation from "./components/LeftPanel/ProvincialSlopeInformation/ProvincialSlopeInformation.vue";
import DeviceSituation from "./components/LeftPanel/DeviceSituation/DeviceSituation.vue";
import AlarHand from "./components/LeftPanel/AlarHand/AlarHand.vue";
import RiskStatistics from "./components/RightPanel/RiskStatistics/RiskStatistics.vue";
import RiskTop10 from "./components/RightPanel/RiskTop10/RiskTop10.vue";
import RiskAssessment from "./components/RightPanel/RiskAssessment/RiskAssessment.vue";

import Map from "../map/index.vue";

export default {
  name: "index",
  components: {
    Map,
    ContentFrame,
    ProvincialSlopeInformation,
    DeviceSituation,
    AlarHand,
    RiskStatistics,
    RiskTop10,
    RiskAssessment,
  },
  data() {
    return {
      /**天气数据 */
      weather: {},
    };
  },

  methods: {
    getWeather() {
      axios
        .get(
          "http://v1.yiketianqi.com/api?unescape=1&version=v9&appid=13377728&appsecret=Zr1ei8id&unescape=1&cityid=101300101"
        )
        .then((Response) => {
          this.weather = Response.data;
          console.log(Response.data);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
  created() {
    // this.getWeather();
  },
  mounted() {
    this.weather = require("./temp/weater.json");
  },
};
</script>
<style scoped lang="less">
@import "../../assets/css/chuShiHua.less";

.main {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .main-title {
    position: relative;
    width: 99%;
    height: 5%;
    display: flex;
    align-items: center;
    margin-left: 1%;
    z-index: 3;

    &__router {
      font-size: 24px;
      font-weight: 400;
      color: #e9fbff;
      line-height: 28px;
      text-shadow: 0px 0px 2px #27a6ff;
      cursor: pointer;
    }

    &__icon {
      width: 2vw;
      aspect-ratio: 1/1;
      background: url("/static/img/slope/position.webp") center no-repeat;
      background-size: 100%;
    }

    &__position {
      display: flex;
      justify-content: space-between;
      width: 20%;
      height: 50%;
      font-size: 20px;
      font-weight: 400;
      color: #ffffff;
      line-height: 20px;

      &__weather {
        width: 20%;
        height: 100%;
        display: flex;

        &__icon {
          width: 35%;
          aspect-ratio: 1/1;
          background: url("/static/img/slope/sum.png") center no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }

  .main-content {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 95%;
  }
}

.left-wrapper {
  width: 25.5%;
  height: 100%;
  position: relative;
  z-index: 2;

  &__content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    &__module {
      position: relative;
      right: 0%;
    }

    &__module:first-child {
      animation: leftContentFrame 0.5s;
    }

    &__module:nth-child(2) {
      animation: leftContentFrame 0.75s;
    }

    &__module:nth-child(3) {
      animation: leftContentFrame 1s;
    }
  }

  &__city {
    width: 100%;
    height: 100%;
    position: absolute;
    background: aqua;
    z-index: 10;
  }
}

.middle-wrapper {
  width: 47%;
  height: 100%;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.right-wrapper {
  width: 25.5%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: relative;
  z-index: 2;
  .right-wrapper__select {
    margin-left: auto;

    .el-select {
      height: 20px;
      margin-left: 11px;

      /deep/ .el-input--suffix {
        height: 100%;

        > input {
          height: 100%;
          border: none;
          background-color: transparent;
          color: #fff;
          text-align: right;
        }

        .el-input__suffix {
          top: -10px;
          height: 40px;
          text-align: right;

          .el-icon-arrow-up:before {
            color: #fff;
          }
        }
      }
    }
  }

  .right-wrapper__content {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;

    .right-wrapper__content__video {
      width: 100%;
      height: 100%;
    }
  }

  .right-wrapper__container {
    position: relative;
    width: 100%;
    height: 100%;

    .right-wrapper__container__img {
      width: 100%;
      height: 100%;
    }

    .right-wrapper__container__icon {
      position: absolute;
      right: 10px;
      bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 20px;
      background-color: rgba(0, 0, 0, 0.3);
      font-size: 20px;
      color: #fff;
      pointer-events: none;
    }
  }

  &__module {
    position: relative;
    left: 0%;
  }

  &__module:first-child {
    animation: rightContentFrame 0.5s;
  }

  &__module:nth-child(2) {
    animation: rightContentFrame 0.75s;
  }

  &__module:nth-child(3) {
    animation: rightContentFrame 1s;
  }
}

.unityModel {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 1;

  &__shade {
    position: absolute;
    width: 100%;
    aspect-ratio: 1/1;
    left: 0;
    top: 0;
    background: radial-gradient(at 50% 71%, #020b1b00 30%, #020b1b 52%);
    z-index: 2025;
    pointer-events: none;
    rotate: 180deg;
  }
}

@keyframes leftContentFrame {
  from {
    right: 120%;
  }
  to {
    right: 0;
  }
}

@keyframes rightContentFrame {
  from {
    left: 120%;
  }
  to {
    left: 0;
  }
}
</style>
